<template>
	<view>
		<view>
			<u-navbar title="维保历史" :titleSize="60" :titleWidth="500" :height="80" titleColor="#FFF" backIconColor="#FFF"
				:background="{'backgroundColor':'#212b32'}">
				<template #right>
					<view style="margin-right: 1vmax;color: #FFF;font-size: 0.5rem;">
						维保历史条目:{{pageCount}}
					</view>
				</template>
			</u-navbar>
			<scroll-view :scroll-y="true" style="height: calc(100vh - 80px);" @scrolltolower="ScrollToBottomEventHandler()" >
				<transition-group name="list" >
					<u-card v-for="(item,index) in data"  :key="index" boxShadow="0px 1px 4px 3px rgba(0,0,0,0.1)" style="margin: 30px;">
						<template #head>
							<view>
								<titleBox :title="item.workNo"  ></titleBox>
							</view>
						</template>
						<template #body>
							<view style="display: flex;margin-left: 2vmax;flex-wrap: wrap;gap: 10px;">
								<view style="width: 50%;">维保类型: {{getMaintenanceType(item.type)}}</view>
								<view >维保状态:{{getMaintenanceAppointmentStatus(item.status)}}</view>
								<view style="width: 100%;">预约时间:{{item.appointTime}}</view>
								<view >维保费用:{{item.payment.price}}</view>
							</view>
						</template>
					</u-card>
				</transition-group>
				<u-loadmore status="loadmore" fontSize="2rem" height="2rem" :load-text="{loadmore:'上拉加载数据',loading:'努力加载中',nomore:'实在没有数据了'}" ></u-loadmore>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum:0,
				pageSize:9,
				pageCount:0,
				data:[]
			}
		}
		, methods: {
			getMaintenanceType(index){
				switch(index){
					case 0:return '常规保养';
					case 1:return '车辆维修';
				}
			},
			getMaintenanceAppointmentStatus(index){
				switch(index){
					case 0:return '待支付';
					case 1:return '维保中';
					case 2:return '已完成';
				}
			},
			ScrollToBottomEventHandler(){
				this.pageNum+=1;
				this.$u.api.get_maintenanceAppointmentList({
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}).then(res =>{
					res.rows.forEach(x =>{
						this.data.push(x)
					})
				})
			}
		}
		, onLoad() {
			this.$u.api.get_maintenanceAppointmentList({
				pageNum: this.pageNum
				, pageSize: this.pageSize
			}).then(res => {
				this.pageCount = res.total;
				// console.log(res.rows);
				this.data = res.rows;
			})
		}
	}
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>
